<template>
  <view class="container">
    <!-- 聊天窗口 -->
    <scroll-view class="chat-window" scroll-y :scroll-top="scrollTop">
      <view class="message-list">
        <!-- 系统欢迎消息 -->
        <view class="message-item system">
          <view class="message-content">
            <text class="message-text">您好！欢迎使用充电桩服务平台智能客服，我是小充，有什么可以帮您的吗？</text>
          </view>
          <text class="message-time">{{ formatTime(new Date()) }}</text>
        </view>
        
        <!-- 用户消息 -->
        <view class="message-item user" v-for="(message, index) in userMessages" :key="index">
          <text class="message-time">{{ message.time }}</text>
          <view class="message-content">
            <text class="message-text">{{ message.content }}</text>
          </view>
        </view>
        
        <!-- 客服消息 -->
        <view class="message-item service" v-for="(message, index) in serviceMessages" :key="index">
          <view class="avatar">
            <image class="avatar-img" src="/static/avatar/service.png"></image>
          </view>
          <view class="message-content">
            <text class="message-text">{{ message.content }}</text>
          </view>
          <text class="message-time">{{ message.time }}</text>
        </view>
        
        <!-- 常见问题推荐 -->
        <view class="faq-section" v-if="showFAQ">
          <view class="faq-title">您是否想了解以下问题：</view>
          <view 
            class="faq-item" 
            v-for="(faq, index) in faqList" 
            :key="index"
            @click="selectFAQ(faq)"
          >
            {{ faq.question }}
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 输入区域 -->
    <view class="input-area">
      <view class="input-box">
        <input 
          class="message-input" 
          placeholder="请输入您的问题..." 
          v-model="inputMessage"
          @confirm="sendMessage"
        />
        <button class="send-btn" @click="sendMessage">发送</button>
      </view>
      
      <!-- 快捷功能 -->
      <view class="quick-actions">
        <view class="action-item" @click="showFAQ = !showFAQ">
          <image class="action-icon" src="/static/icons/faq.png"></image>
          <text class="action-text">常见问题</text>
        </view>
        <view class="action-item" @click="callService">
          <image class="action-icon" src="/static/icons/phone.png"></image>
          <text class="action-text">人工服务</text>
        </view>
        <view class="action-item" @click="goToFeedback">
          <image class="action-icon" src="/static/icons/feedback.png"></image>
          <text class="action-text">意见反馈</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import utils from '../../utils/utils.js'

export default {
  data() {
    return {
      inputMessage: '',
      scrollTop: 0,
      showFAQ: false,
      userMessages: [],
      serviceMessages: [],
      faqList: [
        { question: '如何查找附近的充电桩？', answer: '您可以在首页点击"找电站"或直接在首页搜索框输入地址查找附近的充电桩。' },
        { question: '充电费用如何计算？', answer: '充电费用由电费和服务费组成，具体标准请查看电站详情页面的价格说明。' },
        { question: '如何绑定车辆信息？', answer: '请进入"我的"->"车辆绑定"页面，输入车牌号和车辆信息即可完成绑定。' },
        { question: '充电过程中可以中断吗？', answer: '可以中断充电，但未完成的充电可能无法享受完整的优惠价格。' },
        { question: '如何申请发票？', answer: '在"订单详情"页面可以申请电子发票，填写发票信息后我们将发送到您的邮箱。' }
      ]
    }
  },
  methods: {
    // 发送消息
    sendMessage() {
      if (!this.inputMessage.trim()) {
        uni.showToast({
          title: '请输入消息内容',
          icon: 'none'
        })
        return
      }
      
      // 添加用户消息
      const userMessage = {
        content: this.inputMessage,
        time: this.formatTime(new Date())
      }
      this.userMessages.push(userMessage)
      
      // 模拟客服回复
      setTimeout(() => {
        this.replyMessage(this.inputMessage)
      }, 500)
      
      // 清空输入框
      this.inputMessage = ''
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollTop = 999999
      })
    },
    
    // 客服回复
    replyMessage(message) {
      let reply = '感谢您的咨询，您的问题已收到，我们会尽快回复您。'
      
      // 简单的关键词匹配回复
      if (message.includes('充电') || message.includes('充电桩')) {
        reply = '您可以通过首页的"找电站"功能查找附近的充电桩，点击电站可以查看详细信息和空闲状态。'
      } else if (message.includes('费用') || message.includes('价格')) {
        reply = '充电费用由电费和服务费组成，具体价格请查看电站详情页面。'
      } else if (message.includes('绑定') || message.includes('车辆')) {
        reply = '您可以在"我的"->"车辆绑定"中绑定您的车辆信息，绑定后可享受专属服务。'
      } else if (message.includes('发票')) {
        reply = '在订单详情页面可以申请电子发票，填写发票信息后我们将发送到您的邮箱。'
      } else if (message.includes('退款') || message.includes('退钱')) {
        reply = '如果您需要退款，请在订单详情页面申请退款，我们的工作人员会尽快处理。'
      }
      
      const serviceMessage = {
        content: reply,
        time: this.formatTime(new Date())
      }
      this.serviceMessages.push(serviceMessage)
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollTop = 999999
      })
    },
    
    // 选择常见问题
    selectFAQ(faq) {
      // 添加用户消息
      const userMessage = {
        content: faq.question,
        time: this.formatTime(new Date())
      }
      this.userMessages.push(userMessage)
      
      // 添加客服回复
      setTimeout(() => {
        const serviceMessage = {
          content: faq.answer,
          time: this.formatTime(new Date())
        }
        this.serviceMessages.push(serviceMessage)
        
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollTop = 999999
        })
      }, 500)
      
      this.showFAQ = false
    },
    
    // 拨打人工服务
    callService() {
      uni.makePhoneCall({
        phoneNumber: '400-123-4567'
      })
    },
    
    // 意见反馈
    goToFeedback() {
      uni.showToast({
        title: '意见反馈功能待实现',
        icon: 'none'
      })
    },
    
    // 格式化时间
    formatTime(date) {
      return utils.formatTime(date)
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.chat-window {
  flex: 1;
  padding: 20rpx;
  background-color: #f5f5f5;
}

.message-list {
  padding-bottom: 20rpx;
}

.message-item {
  display: flex;
  margin-bottom: 30rpx;
}

.message-item.system {
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.message-item.user {
  justify-content: flex-end;
}

.message-item.service {
  justify-content: flex-start;
}

.avatar {
  margin-right: 20rpx;
}

.avatar-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.message-content {
  max-width: 70%;
  padding: 20rpx;
  border-radius: 10rpx;
  position: relative;
}

.message-item.user .message-content {
  background-color: #007aff;
  color: #fff;
}

.message-item.service .message-content,
.message-item.system .message-content {
  background-color: #fff;
  color: #333;
}

.message-text {
  font-size: 28rpx;
  line-height: 1.5;
}

.message-time {
  font-size: 20rpx;
  color: #999;
  margin-top: 10rpx;
  align-self: flex-end;
}

.message-item.user .message-time {
  margin-right: 10rpx;
}

.message-item.service .message-time,
.message-item.system .message-time {
  margin-left: 10rpx;
}

.faq-section {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.faq-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.faq-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  font-size: 26rpx;
  color: #007aff;
}

.faq-item:last-child {
  border-bottom: none;
}

.input-area {
  background-color: #fff;
  padding: 20rpx;
  border-top: 1rpx solid #f5f5f5;
}

.input-box {
  display: flex;
  margin-bottom: 20rpx;
}

.message-input {
  flex: 1;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.send-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.quick-actions {
  display: flex;
  justify-content: space-around;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 10rpx;
}

.action-text {
  font-size: 20rpx;
  color: #666;
}
</style>